jQuery(function(){
	$fieldId = 0;
	jQuery( "#field-group-drop" ).sortable({ revert: true,
    	out: function(event, ui) { 
			jQuery(this).removeClass('over');
			//$(this).remove();
		},
		remove: function(event, ui) {
			//console.log('sort remove');
		},
		over:function(event,ui){
			jQuery(this).addClass('over');
		},
		receive: function(event, ui) { 
			jQuery(this).removeClass('over');
		},
		update:function(event,ui){
			$fieldId = jQuery(this).find('.items').length;
			i = 1;
			jQuery(this).find('.items').each(function(){
				jQuery(this).attr('id',i);
				jQuery(this).find('.wp-fields-field-group-one-field-id').val(i);
				jQuery(this).find('.wp-fields-field-group-one-field-id').prop("name","field["+i+"][id]");
				$type = jQuery(this).attr('class').replace(/items/g,'').replace(/ui-draggable/g,'');
				jQuery(this).find('.wp_field_group_type').val($type);
				jQuery(this).find('.wp_field_group_type').prop("name","field["+i+"][type]");
				$txtName = jQuery(this).find('.txt-name');
				$txtName.attr('name','field['+i+'][name]');
				$txtDesc = jQuery(this).find('.txt-desc');
				$txtDesc.attr('name','field['+i+'][description]');
				++i;
			})	
		}
	});
	 
	//$( "#field-group-drop" ).disableSelection();
	//$( "#field-group-drop" ).droppable({ activeClass: 'ui-state-highlight' });
	jQuery( ".items" ).draggable({ connectToSortable: '#field-group-drop',  helper: 'clone' });
	
	jQuery( "#field-group-drop .toggle" ).live('click',function(){
		jQuery(this).parents('.items').find('.options').toggle();	
		return false;
	});
	
	jQuery( "#field-group-drop .del" ).live('click',function(){
		jQuery(this).parents('.items').remove();
		//$( "#field-group-drop" ).sortable({"refresh":"refresh"});
		return false;
	});
	jQuery( "#clear-group" ).live('click',function(){
		jQuery( "#field-group-drop").html("");
		return false;
	});
	
	jQuery('.txt-name').live('keyup',function(){
		$txtname = jQuery(this).val();
		jQuery(this).parents('.items').find('.field-name').html(": " + $txtname );
	});
	
	/*Field group new Add*/
	$multiple = true;
	$markupGen = '<input type="text" value="" class="txt" name="{fieldName}"><a href="" class="del-field">Delete field</a>';
	$markupRadio = '<input name="{radioOptionName}" type="radio" value="{radioOptionValue}" class="radio-default-check" />';
	$markupCheck = '<input name="{checkOptionName}" type="checkbox" value="" class="check-default-check"  />';
	$num = 0;
	jQuery('.addmore').live('click',function(){
		$id = jQuery(this).parents('.items').attr('id');
		$section = jQuery(this).parents('.items').attr('class');
		$numReset = jQuery(this).parents('.options').find('.more-fields').length;
		if($section.match(/radio/gi)){
			if($numReset == 0){
				$num = 0;	
			}
			++$num;
			$fieldName = "field["+$id+"][type_radiobuttons_options][radiobutton_num_"+ ($num) +"][value]";
			$radioOptionName = "field["+$id+"][type_radiobuttons_options][checked_by_default_num]";
			$radioOptionValue = "radiobutton_num_"+($num)+"";
			$toInject = $markupGen.replace(/{fieldName}/g,$fieldName) + $markupRadio.replace(/{radioOptionName}/g,$radioOptionName).replace(/{radioOptionValue}/g,$radioOptionValue);	
		}else if($section.match(/check/gi)){
			if($numReset == 0){
				$num = 0;	
			}
			++$num;
			$fieldName = "field["+$id+"][type_check_options][checkbutton_num_"+ ($num) +"][value]";
			$checkOptionName = "field["+$id+"][type_check_options][checked_by_default_num_"+ ($num) +"]";
			$toInject = $markupGen.replace(/{fieldName}/g,$fieldName) + $markupCheck.replace(/{checkOptionName}/g,$checkOptionName);
		}else if($section.match(/select/gi)){
			if($numReset == 0){
				$num = 0;	
			}
			++$num;
			$fieldName = "field["+$id+"][type_select_options][selectbutton_num_"+ ($num) +"][value]";
			$toInject = $markupGen.replace(/{fieldName}/g,$fieldName);
		}
		$toInject = "<div class='more-fields'>" + $toInject + "<div>";
		jQuery(this).parent().append($toInject);
		return false;
	})
	
	jQuery('.del-field').live('click',function(){
		jQuery(this).parents('.more-fields').remove();
		return false;
	});
	
	/*jQuery('#debugclose').appendTo(body);
	jQuery('#debugclose').live('click',function(){
		jQuery('#debug').remove();
	})*/
	
})